import React, {useEffect, useState} from 'react';
import {Form, Modal} from "antd";
import ProForm, {ProFormSelect} from '@ant-design/pro-form';
import {getUserLable} from "@/services/ant-design-pro/users";

const BatchLevel = (props) => {
  const {isBatchLevel,handleOk,batchLevel}= props;
  const [levelList,setLevelList] = useState([])
  const [form] =  Form.useForm();

  // 用户标签的列表
  useEffect(async ()=>{
    const list = await getUserLable();
    let items = list.data.map(item =>{
      return {
        label:item.label_name,
        value:item.id
      }
    })

    setLevelList(items)
  },[])
  return (
    <div>
      <Modal
        title='请选择用户标签'
        visible={isBatchLevel}
        destroyOnClose={true}
        onOk={()=>{
          form.validateFields().then(async values=>{
            handleOk(values)
          })
        }}
        onCancel={batchLevel}
      >
      <ProForm
        form={form}
        submitter={false}
      >
        <ProFormSelect
          name="label_id"
          label="用户标签"
          options={levelList}
          placeholder="请选择用户标签"
          rules={[{ required: true, message: '请选择用户标签!' }]}
        />
      </ProForm>
      </Modal>
    </div>
  );
};

export default BatchLevel;
